<template>
  <!-- 按照百分比过滤节点 -->
  <div class="node-count-slider">
    <span class="count-text">筛选</span>
    <div class="slider-section">
      <a-slider v-model="showCount" :min="1" :max="100"/>
    </div>
    <span class="count-text">{{showCount}}%</span>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
import {debounce} from 'lodash'
import GraphBuild from '@/store/modules/graphbuild'

@Component({
  components: {}
})
export default class SampleNodeSlider extends Vue {
  @Prop({type: Number, default: 100}) nodeShowCount: number = 100
  public showCount: number = 100

  public mounted() {
    this.showCount = this.nodeShowCount
  }

  @Watch('showCount')
  public sliderChange(value: any) {
    if(GraphBuild.graphSaveStatus.type !== 2) {
      this.showCount = 100
      this.$message.warning('请等待 graph 图数据保存位置信息后进行筛选操作!')
      return
    }
    this.nodeTooltipDebounce(value)
  }
  private nodeTooltipDebounce = debounce((proportion: any) => this.emitExtractingNode(proportion), 400)

  public emitExtractingNode(proportion: any) {
    this.$emit('extracting-node', proportion)
  }

}
</script>

<style scoped lang="less">
.node-count-slider {
  align-items: center;
  bottom: 15px;
  display: flex;
  left: 15px;
  position: absolute;
  width: 250px;
  z-index: 100;

  .slider-section {
    width: 160px;
  }

  .count-text {
    padding-left: 4px;
  }
}
</style>
